<template>
    <div class="video-selector">
      <div class="selector-header">
        <h3>{{ title }}</h3>
        <el-button 
          type="success" 
          size="small" 
          @click="refreshVideos"
          :loading="loading"
        >
          刷新列表
        </el-button>
      </div>
  
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="3" animated />
      </div>
      
      <div v-else-if="videos.length === 0" class="empty-state">
        <el-empty description="暂无可用视频" />
      </div>
      
      <el-radio-group 
        v-else 
        v-model="selectedVideoId" 
        class="video-list"
        @change="handleSelection"
      >
        <el-scrollbar height="250px">
          <div v-for="video in videos" :key="video.id" class="video-item">
            <el-radio :label="video.id" border>
              <div class="video-info">
                <div class="video-name">{{ video.filename }}</div>
                <div class="video-date">{{ formatDate(video.created_at) }}</div>
              </div>
            </el-radio>
          </div>
        </el-scrollbar>
      </el-radio-group>
    </div>
  </template>
  
  <script>
  import { defineComponent, ref, onMounted, computed } from 'vue';
  import introOutroService from '@/services/introOutroService';
  
  export default defineComponent({
    name: 'VideoSelector',
    props: {
      videoType: {
        type: String,
        required: true,
        validator: (value) => ['opening', 'ending'].includes(value)
      },
      modelValue: {
        type: [Number, null],
        default: null
      }
    },
    emits: ['update:modelValue', 'selection-change'],
    setup(props, { emit }) {
      const videos = ref([]);
      const loading = ref(false);
      
      // 计算标题
      const title = computed(() => {
        return props.videoType === 'opening' ? '选择片头视频' : '选择片尾视频';
      });
  
      // 创建计算属性以同步v-model
      const selectedVideoId = computed({
        get: () => props.modelValue,
        set: (value) => {
          emit('update:modelValue', value);
        }
      });
  
      // 加载视频列表
      const loadVideos = async () => {
        loading.value = true;
        try {
          const result = await introOutroService.getIntroOutroVideos(props.videoType);
          if (result.success) {
            videos.value = result.videos || [];
          } else {
            console.error('加载视频列表失败:', result.message);
          }
        } catch (error) {
          console.error('获取视频列表出错:', error);
        } finally {
          loading.value = false;
        }
      };
  
      // 刷新视频列表
      const refreshVideos = () => {
        loadVideos();
      };
  
      // 处理选择变更
      const handleSelection = (value) => {
        const selectedVideo = videos.value.find(v => v.id === value);
        emit('selection-change', selectedVideo);
      };
  
      // 格式化日期
      const formatDate = (dateString) => {
        if (!dateString) return '未知时间';
        
        try {
          const date = new Date(dateString);
          return date.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          });
        } catch (e) {
          return dateString;
        }
      };
  
      onMounted(() => {
        loadVideos();
      });
  
      return {
        videos,
        loading,
        title,
        selectedVideoId,
        refreshVideos,
        formatDate,
        handleSelection
      };
    }
  });
  </script>
  
  <style scoped>
  .video-selector {
    margin-bottom: 20px;
  }
  
  .selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .selector-header h3 {
    margin: 0;
  }
  
  .loading-container, .empty-state {
    padding: 20px 0;
  }
  
  .video-list {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .video-item {
    margin-bottom: 10px;
  }
  
  .video-item :deep(.el-radio) {
    width: 100%;
    margin-right: 0;
    padding: 10px;
  }
  
  .video-info {
    display: flex;
    flex-direction: column;
  }
  
  .video-name {
    font-weight: 500;
    margin-bottom: 5px;
  }
  
  .video-date {
    font-size: 12px;
    color: #909399;
  }
  </style>